import {exeControlCommand} from '@/api/setting'
import {CCard} from '@/components/card'
import {IconImg} from '@/components/images'
import {View, Switch} from '@tarojs/components'
import Taro from '@tarojs/taro'
import {useState, useEffect} from 'react'
// import { AtForm, AtSwitch } from 'taro-ui'

export const ControllBtn: React.FC<{controll: Setting.DevControll}> = ({
  controll,
  children,
  rainwaterChecked,
  setRainwaterCheckedFunc
}): JSX.Element => {
  enum ControllImgNameMap {
    '0210' = 'devControll-read',
    '0211' = 'devControll-write',
    '0212' = 'devControll-turnOn',
    '0213' = 'devControll-turnOff'
  }

  useEffect(() => {
    console.log(children)
  })

  function handleControllBtnClick() {
    switch (controll.controlCode) {
      case '0213':
        Taro.showModal({
          title: '确认是否关闭',
          success(res) {
            console.log('close success', res)
            if (res.confirm) {
              runControll()
            }
          }
        })
        break
      case '0210':
      case '0211':
      case '0212':
      default:
        runControll()
        break
    }
  }

  function runControll() {
    if (
      controll.controlName != '雨水开启' &&
      controll.controlName != '污水开启'
    ) {
      Taro.showLoading({
        title: '执行中...'
      })
      exeControlCommand({controlId: controll.controlId})
        .then(res => {
          Taro.hideLoading()
          if (res.msg) {
            Taro.showModal({
              content: res.msg
            })
          }
        })
        .catch(err => {
          if (err && err.msg) {
            Taro.showModal({
              content: err.msg
            })
          }
          Taro.hideLoading()
        })
    }
  }

  // const [rainwaterChecked,setRainwaterChecked] = useState(true)

  // let rainwaterChecked = true

  // function switchChange(){
  //   // let checked = !rainwaterChecked
  //   // setRainwaterChecked(checked)

  //   Taro.showLoading({
  //     title: '执行中'
  //   })
  //   // Taro.showLoading({
  //   //   title: '正在关闭'
  //   // })
  //   setTimeout(()=>{
  //     Taro.hideLoading()
  //   },2000)
  //   console.log(11111);

  // }

  function showSwitch() {
    let re = <></>
    if (controll.controlName == '雨水开启' && rainwaterChecked) {
      re = showSwitchTrue()
    } else if (controll.controlName == '雨水开启' && !rainwaterChecked) {
      re = showSwitchFalse()
    } else if (controll.controlName == '污水开启' && rainwaterChecked) {
      re = showSwitchFalse()
    } else {
      re = showSwitchTrue()
    }
    // if(controll.controlName=="雨水开启"||controll.controlName=="污水开启"){
    return re
    // }
  }

  function showSwitchTrue() {
    return (
      <Switch
        className="statusSwitch rainwaterOrSewage"
        onChange={setRainwaterCheckedFunc}
        style={{width: '40px', height: '20px'}}
        checked
      />
    )
  }
  function showSwitchFalse() {
    return (
      <Switch
        className="statusSwitch rainwaterOrSewage"
        onChange={setRainwaterCheckedFunc}
        style={{width: '40px', height: '20px'}}
      />
    )
  }

  return (
    <CCard onClick={handleControllBtnClick} style={{position: 'relative'}}>
      {children
        ? children
        : [
            <View>
              <IconImg
                imgName={ControllImgNameMap[controll.controlCode]}
              ></IconImg>
            </View>,
            <View className="hanzi text-14 font-bold mb-2 truncate">
              {controll.controlName}
            </View>,
            <View className="hanzi text-14 text-xx_text truncate">
              {controll.controlDesc}
            </View>
          ]}
    </CCard>
  )
}
